<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>默认点标记</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img,
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }

        .marker {
            position: absolute;
            top: -20px;
            right: -118px;
            color: #fff;
            padding: 4px 10px;
            box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #25A5F7;
            border-radius: 3px;
        }

        .input-card{
            width: 350px;
            z-index: 170;
            margin-bottom:40px ;
            margin-right: 50px;
        }

        .input-card .search-input{
            display: flex;
        }

        .input-card .search-input input{
            box-sizing: content-box;
            width: 250px;
        }
        .search-input .searchBtn{
            display: table-cell;
            text-align: center;
            width: 50px;
            height: 38px;
            background: deepskyblue;
        }
        .search-input .searchBtn img{
            display: inline-block;
            margin-top: 2px;

        }
        .map-tip{
            color: #111111;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
 <div class="search-input">
     <input type="text" id="pageNum" name="pageNum" placeholder="请输入快递编号">
     <span id="searchBtn" class="searchBtn">
         <img src="../images/map-search.svg">
     </span>

 </div>
    <p id="map-tip" class="map-tip"></p>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../../configure.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=0a293e2b71806dc12cc1b96a28b3985c"></script>
<script type="text/javascript">
    var search = window.location.search
    var arr = search.split("=")
    var pageNum = arr[1]
    $("#pageNum").val(pageNum)
    getLonLat(pageNum)
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 4
    });

    $("#searchBtn").click(function () {
        var pageNum=$("#pageNum").val()

       getLonLat(pageNum)
    })
 function getLonLat(pageNum) {
     $.post(url+"/map/selectStart2Destination","pageNum="+pageNum,function (data) {
         if(data.code==1){
             var startAddress = data.data.startAddress
             var routeAddress = data.data.routeAddress
             var endAddress = data.data.endAddress
             var start = data.data.startLonLat
             var startLonLat = start.split(",")

             var route=data.data.routeLonLat
             var routeLonLat=route.split(",")
             var end = data.data.endLonLat
             var endLonLat = end.split(",")

             var window=`<div style="height: 210px ; width: 220px;font-size: 14px"><br>
            <div>当前位置:<span id="routeAddress">${data.data.routeAddress}</span></div><br>
            <div>起始地址:<span id="startAddress">${data.data.startAddress}</span></div><br>
            <div>终点地址:<span id="endAddress">${data.data.endAddress}</span></div><br>
            <div>你的宝贝<span id="leftTime" style="color: #0B9DDB">${data.data.leftTime}</span>小时后到达，请您耐心等待！</div>
            </div>`

             console.log($("#routeAddress").html())
             getRoute(startLonLat,routeLonLat,endLonLat)
             getShowFormation(routeLonLat,window)
         }
     })
 }
 $("#pageNum").blur(function () {
     var pageNum=$("#pageNum").val()
     if(""==pageNum){
         $("#map-tip").html("")
     }
 })


    function getRoute(startLonLat,routeLonLat,endLonLat) {
        this.map.clearMap()
        var path = [];
            path.push([startLonLat[0], startLonLat[1]]);
            path.push([routeLonLat[0], routeLonLat[1]]);
            path.push([endLonLat[0], endLonLat[1]]);

        map.plugin("AMap.DragRoute", function() {
                 route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
                route.search(); //查询导航路径并开启拖拽导航

        });

    }

    function getShowFormation(routeLonLat,window) {
        var infoWindow
        var info = []
        var content=[window]
        var position = new AMap.LngLat(routeLonLat[0],routeLonLat[1])

        infoWindow = new AMap.InfoWindow({
            content: content.join('<br/>'),
            offset:new AMap.Pixel(0, -30)

        })

        infoWindow.open(map, position)
    }



   
    
   
</script>
</body>
</html>